import TopBarOne from '../module/topBar/topBar_1.vue';
import NavigationBarOne from '../module/navigationBar/navigationBar_1.vue';
import { Rotation as RotationOne } from '../module/rotation/rotation_1.jsx';
import NewsOne from '../module/news/news_1.vue';
import FooterOne from '../module/footer/footer_1.vue';


const createMapConfig = () => {
    const componentList = [];
    const componentMap = {};

    return {
        componentList,
        componentMap,
        register: (component) => {
            componentList.push(component);
            componentMap[component.key] = component;
        }
    }
}

export const registerConfig = createMapConfig();

const createColor = (label, defaultValue) => ({
    type: 'colorComponent',
    label,
    value: defaultValue,
})
const createProgressBar = (label, defaultValue, max = 24, min = 12) => ({
    type: 'progressComponent',
    label,
    max,
    min,
    value: defaultValue,
})
const createSwitch = (label, defaultValue, options = {
    leftLabel: '否',
    rightLabel: '是',
}) => ({
    type: 'switchComponent',
    label,
    value: defaultValue,
    options
})
const createText = (label, defaultValue) => ({
    type: 'inputComponent',
    label,
    value: defaultValue,
})
const createRadio = (label, defaultValue, options = []) => ({
    type: 'radioComponent',
    label,
    value: defaultValue,
    options
})

registerConfig.register({
    type: '顶部栏',
    label: '风格一',
    key: 'top_bar_one',
    preview: '',
    render: ({props} = {}) => {
        return <TopBarOne
            backgroundColor={props?.backgroundColor.value}
            color={props?.color.value}
            fontSize={props?.fontSize.value}
            height={props?.height.value}
            justifyContent={props?.justifyContent.value ? 'flex-end' : 'flex-start'}
        ></TopBarOne>
    },
    props: {
        backgroundColor: createColor('背景颜色', '#D8D8D8'),
        color: createColor('文字颜色', '#4D4D4D'),
        fontSize: createProgressBar('文字大小', '14'),
        height: createProgressBar('模块高度', '40', 80, 30),
        justifyContent: createSwitch('文字位置', false, {
            leftLabel: '左',
            rightLabel: '右',
        }),
    }
})
registerConfig.register({
    type: '导航栏',
    label: '风格一',
    key: 'navigation_bar_one',
    preview: '',
    render: ({props} = {}) => {
        return <NavigationBarOne
            backgroundColor={props?.backgroundColor.value}
            hoverBackgroundColor={props?.hoverBackgroundColor.value}
            color={props?.color.value}
            fontSize={props?.fontSize.value}
            height={props?.height.value}
            isImage={props?.isImage.value}
            interval={props?.interval.value}
        ></NavigationBarOne>
    },
    props: {
        backgroundColor: createColor('背景颜色', '#ffffff'),
        hoverBackgroundColor: createColor('hover背景颜色', '#eeeeee'),
        color: createColor('文字颜色', '#333333'),
        fontSize: createProgressBar('文字大小', '14'),
        height: createProgressBar('模块高度', '100', 140, 60),
        isImage: createSwitch('导航logo', true, {
            leftLabel: '隐藏',
            rightLabel: '显示',
        }),
        interval: createProgressBar('logo文字间距', '150', 200, 100),
    }
})
registerConfig.register({
    type: 'banner',
    label: '轮播图',
    key: 'rotation_two',
    preview: '',
    render: ({props} = {}) => {
        return <RotationOne
            backgroundColor={props?.backgroundColor.value}
            color={props?.color.value}
            height={props?.height.value}
            duration={props?.duration.value}
            directorWidth={props?.directorWidth.value}
            directorHeight={props?.directorHeight.value}
            autoplay={props?.autoplay.value}
            isShowDirector={props?.isShowDirector.value}
            directorType={props?.directorType.value}
            isShowDot={props?.isShowDot.value}
            isShowNum={props?.isShowNum.value}
            dotType={props?.dotType.value}
            dotBottom={props?.dotBottom.value}
            dotActiveBackgroundColor={props?.dotActiveBackgroundColor.value}
        ></RotationOne>
    },
    props: {
        backgroundColor: createColor('主题背景颜色', '#D8D8D8'),
        color: createColor('主题颜色', '#000000'),
        height: createProgressBar('模块高度', '300', 500, 250),
        autoplay: createSwitch('自动循环', true),
        duration: createProgressBar('间隔时间', '4', 8, 2),
        isShowDirector: createSwitch('显示按钮', true),
        directorWidth: createProgressBar('按钮宽度', '40', 50, 25),
        directorHeight: createProgressBar('按钮高度', '40', 50, 25),
        directorType: createSwitch('按钮类型', true, {
            leftLabel: '圆形',
            rightLabel: '矩形',
        }),
        isShowDot: createSwitch('显示底部圆点', true),
        dotActiveBackgroundColor: createColor('圆点激活时的颜色', '#ffffff'),
        isShowNum: createSwitch('显示底部圆点的数字', true),
        dotType: createSwitch('底部圆点的类型', true, {
            leftLabel: '圆形',
            rightLabel: '矩形',
        }),
        dotBottom: createProgressBar('底部圆点距底部高度', '10', 30, 10),
    }
})
registerConfig.register({
    type: '新闻模块',
    label: '文字风格',
    key: 'news_one',
    preview: '',
    render: ({props} = {}) => {
        return <NewsOne
            color={props?.color.value}
            subColor={props?.subColor.value}
            backgroundColor={props?.backgroundColor.value}
            title={props?.title.value}
            subTitle={props?.subTitle.value}
            iconType={props?.iconType.value}
            column={props?.column.value}
        ></NewsOne>
    },
    props: {
        color: createColor('主题颜色', '#15ccac'),
        subColor: createColor('副标题颜色', '#ababab'),
        backgroundColor: createColor('背景颜色', '#f6f6f6'),
        title: createText('标题名称', '标题'),
        subTitle: createText('副标题名称', 'Sub Title'),
        iconType: createSwitch('列表icon', true, {
            leftLabel: '序号',
            rightLabel: '圆点',
        }),
        column: createRadio('最大列数', '2', [
            {label: '1列', value: '1'},
            {label: '2列', value: '2'},
            {label: '3列', value: '3'},
        ]),
    }
})
registerConfig.register({
    type: '底部栏',
    label: '风格一',
    key: 'footer_one',
    preview: '',
    render: ({props} = {}) => {
        return <FooterOne
            textColor={props?.textColor.value}
            hoverColor={props?.hoverColor.value}
            backgroundColor={props?.backgroundColor.value}
            isShowLink={props?.isShowLink.value}
            isShowScan={props?.isShowScan.value}
        ></FooterOne>
    },
    props: {
        textColor: createColor('文字颜色', '#ffffff'),
        hoverColor: createColor('hover颜色', '#cccccc'),
        backgroundColor: createColor('背景颜色', '#000000'),
        isShowLink: createSwitch('显示友情链接', true),
        isShowScan: createSwitch('显示二维码', true),
    }
})